<template>
    <div id="ExpenseApplyContainer">
        <div id="headTitle">班费申请</div>
        <!--搜索区域元素块-->
        <div class="searchExpenseApplyBox">
            <div class="ExpenseApplyCreateBox">
                <el-input style="width: 400px" placeholder="请输入申请原因(不输入任何信息，则搜索全部申请)"
                          v-model="searchExpenseApplyReason"
                          clearable @clear="loadApply"></el-input>
                <el-button type="primary" @click="loadApply" style="margin-left: 10px">搜索</el-button>
            </div>
            <!--通知展示表-->
            <div class="ExpenseApplyTable">
                <!--通知项目-->
                <div class="ExpenseApply">
                    <el-table class="ExpenseApplyCode"
                              :data="expenseApplyMessage"

                              width="450"
                              stripe border
                    >
                        <el-table-column type="expand">
                            <template #default="props">
                                <p class="ExpenseApplyContent">
                                    <div class="title">申请原因</div>
                                    <div class="content">{{ props.row.applyReason }}</div>
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="applyUserName" label="申请人" align="center"/>
                        <el-table-column prop="applyAmount" label="申请金额" align="center">
                            <template #default="scope">{{scope.row.applyAmount * (-1)}}</template></el-table-column>
                        <el-table-column prop="applyTime" label="申请时间" align="center"/>
                        <el-table-column prop="auditTime" label="审核时间" align="center"/>
                        <el-table-column prop="status" label="状态" align="center">
                            <template #default="scope">
                                <span v-if="scope.row.status === '审核中'" style="color:#409eff">{{ scope.row.status }}</span>
                                <span v-if="scope.row.status === '不同意'" style="color:#f56c6c">{{ scope.row.status }}</span>
                                <span v-if="scope.row.status === '同意'" style="color:#67c23a">{{ scope.row.status }}</span>
                                <span v-if="scope.row.status === '撤销'" style="color:#909399">{{ scope.row.status }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="auditUserName" label="审核人员" align="center"/>
                        <el-table-column label="操作" align="center">
                            <template #default="scope">
                                <el-button type="primary" v-if="scope.row.status == '审核中'" plain @click="approveApply(scope.$index,scope.row.expApplyID)">同意</el-button>
                                <el-button type="primary" v-if="scope.row.status == '审核中'" plain @click="refuseApply(scope.row.expApplyID)">拒绝</el-button>
                                <el-button type="success" v-if="scope.row.status == '同意'" plain :disabled="true">已同意</el-button>
                                <el-button type="danger" v-if="scope.row.status == '不同意'" plain :disabled="true">已拒绝</el-button>
                                <el-button type="info" v-if="scope.row.status == '撤销'" plain :disabled="true">已撤销</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>

        <div class="pagination">
            <el-pagination
                    v-model:current-page="applyMessagePageNumber"
                    v-model:page-size="applyMessagePageSize"
                    :page-sizes="[2, 5, 10, 15, 20]"
                    :small=false
                    :disabled=false
                    :background=false
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="applyMessageTotal"
                    @size-change="SizeChange"
                    @current-change="CurrentChange"
            />
        </div>
    </div>
</template>
<script>
import "../assets/AuditApply.css";
import prompt from "@/utils/prompt";
import request from "@/utils/requset.js";
import {reactive} from "vue";
import router from "@/router";

export default {
    name: 'expenseApply',
    data() {
        return {
            expenseApplyMessage: [],
            audit: {},
            applyMessageTotal: 0,
            applyMessagePageNumber: 1,
            applyMessagePageSize: 2,
            searchExpenseApplyReason: "",
            applyMessageID: 0
        }
    },
    created() {
        if (this.isIntoClass() && this.isClassAdmin()) {
            this.loadApply();
        }
    },
    methods: {
        //是否加入班级
        isIntoClass() {
            let classID = localStorage.getItem("userInfo") ? JSON.parse(localStorage.getItem("userInfo")).classID : 0;
            if (classID < 1) {
                prompt("还未加入班级！", "error");
                router.push({path: "home"});
                return false;
            }
            return true;
        },

        //是否班级管理员
        isClassAdmin() {
            let isClassAdmin = localStorage.getItem("userInfo") ? JSON.parse(localStorage.getItem("userInfo")).isClassAdmin : "";
            if (isClassAdmin === "是") {
                return true;
            }
            prompt("权限不足！", "error");
            router.push({path: "home"});
            return false;
        },
        //加载数据
        loadApply() {
            let token = localStorage.getItem("token") ? localStorage.getItem("token") : "";
            if (token === "") {
                prompt("还未登录！", "error");
                router.push({path: "/login"});
                return;
            }
            request.get("/paymentProject/expenseApplyInfo", {
                params: {
                    token: token,
                    applyMessagePageNumber: this.applyMessagePageNumber,
                    applyMessagePageSize: this.applyMessagePageSize,
                    searchExpenseApplyReason: this.searchExpenseApplyReason,
                }
            }).then(result => {
                console.log(result)
                //请求失败
                if (result.code !== "200") {
                    prompt(result.message, result.type);
                }
                //请求成功
                this.expenseApplyMessage = result.data.ExpenseApplys;
                this.applyMessageTotal = result.data.ExpenseApplyTotal;
            })
        },
        //分页-单页数量
        SizeChange(applyMessagePageSize) {
            this.applyMessagePageSize = applyMessagePageSize;
            this.loadApply();
        },
        //分页-页码
        CurrentChange(applyMessagePageNumber) {
            this.applyMessagePageNumber = applyMessagePageNumber;
            this.loadApply();
        },
        //拒绝班费申请
        refuseApply(expApplyID) {
            this.audit.expApplyID = expApplyID;
            this.audit.token = localStorage.getItem("token") ? localStorage.getItem("token") : "";
            request.post(
                "/paymentProject/refuse",
                this.audit
            ).then(result => {
                if (result.code !== "200") {
                    prompt("操作失败！", result.type);
                }
                //请求成功
                prompt("操作成功！", result.type);
                //加载新数据
                this.loadApply();
            });
        },
        //同意班费申请
        approveApply(index, expApplyID) {
            this.audit.expApplyID = expApplyID;
            this.audit.applyAmount = this.expenseApplyMessage[index].applyAmount;
            console.log(this.audit.applyAmount);
            this.audit.token = localStorage.getItem("token") ? localStorage.getItem("token") : "";
            request.post(
                "/paymentProject/approve",
                this.audit
            ).then(result => {
                //请求成功
                prompt(result.message, result.type);
                //加载新数据
                this.loadApply();
            });

        }
    }
}
</script>
